import { HStack, Image ,Button,Link} from '@chakra-ui/react'
import logo from '../assets/logo.webp';
import ColorModeSwitch from './ColorModeSwitch';
import SearchInput from './SearchInput';
import App from "@/components/app-header/index"
import headerTitles from '@/assets/data/header-titles.json'
import { NavLink } from 'react-router-dom'
interface Props {
  onSearch: (searchText: string) => void;
}

const NavBar = ({ onSearch }: Props) => {
  const showItem = (item:any)=>{
      if(item.type==='path'){
        return (
            <NavLink to={item.link}>
                <Button variant="ghost">{item.title}</Button>
            </NavLink>
        )
      }else{
            return (
                <a href={item.link} target="_blank" rel="noreferrer">
                    {item.title}
                </a>
            )
      }
  }

  return (
    <HStack padding='10px'>
        {headerTitles.map((item)=>{
            return (
                <div key={item.title}>
                    {showItem(item)}

                </div>
                // <Button variant="plain" as="a" href={item.link}> {item.title}</Button>
            )
        })}
      <SearchInput onSearch={onSearch} />
      <ColorModeSwitch />
      <Button variant="plain">登录</Button>
      <Button variant="plain">注册</Button>

    </HStack>
  )
}

export default NavBar